<template>
  <div class="app-container">
    <!--<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
             label-width="68px">
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
&lt;!&ndash;        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>&ndash;&gt;
      </el-form-item>
    </el-form>-->
    <el-row :gutter="20">
      <el-col :span="12">
        <h2>本周开发经费报销数据统计</h2>
        <el-table border v-loading="loading" :data="dataListW" ref="table" :max-height="tableMaxHeight">
          <el-table-column label="部门名称" align="center" prop="deptName"/>
          <el-table-column label="报销条目数" align="center" prop="count1"/>
          <el-table-column label="报销金额" width="120" align="center" prop="money1"/>
          <el-table-column label="已通过申请" align="center" prop="count2"/>
          <el-table-column label="已通过金额" width="120" align="center" prop="money2"/>
          <el-table-column label="已发放条目数" align="center" prop="count3"/>
          <el-table-column label="已发放金额" width="120" align="center" prop="money3"/>
        </el-table>
      </el-col>
      <el-col :span="12">
        <h2>本月开发经费报销数据统计</h2>
        <el-table border v-loading="loading" :data="dataListM" ref="table" :max-height="tableMaxHeight">
          <el-table-column label="部门名称" align="center" prop="deptName"/>
          <el-table-column label="报销条目数" align="center" prop="count1"/>
          <el-table-column label="报销金额" width="120" align="center" prop="money1"/>
          <el-table-column label="已通过申请" align="center" prop="count2"/>
          <el-table-column label="已通过金额" width="120" align="center" prop="money2"/>
          <el-table-column label="已发放条目数" align="center" prop="count3"/>
          <el-table-column label="已发放金额" width="120" align="center" prop="money3"/>
        </el-table>
      </el-col>
      <el-col :span="12">
        <h2>本季度开发经费报销数据统计</h2>
        <el-table border v-loading="loading" :data="dataListS" ref="table" :max-height="tableMaxHeight">
          <el-table-column label="部门名称" align="center" prop="deptName"/>
          <el-table-column label="报销条目数" align="center" prop="count1"/>
          <el-table-column label="报销金额" width="120" align="center" prop="money1"/>
          <el-table-column label="已通过申请" align="center" prop="count2"/>
          <el-table-column label="已通过金额" width="120" align="center" prop="money2"/>
          <el-table-column label="已发放条目数" align="center" prop="count3"/>
          <el-table-column label="已发放金额" width="120" align="center" prop="money3"/>
        </el-table>
      </el-col>
      <el-col :span="12">
        <h2>本年开发经费报销数据统计</h2>
        <el-table border v-loading="loading" :data="dataListY" ref="table" :max-height="tableMaxHeight">
          <el-table-column label="部门名称" align="center" prop="deptName"/>
          <el-table-column label="报销条目数" align="center" prop="count1"/>
          <el-table-column label="报销金额" width="120" align="center" prop="money1"/>
          <el-table-column label="已通过申请" align="center" prop="count2"/>
          <el-table-column label="已通过金额" width="120" align="center" prop="money2"/>
          <el-table-column label="已发放条目数" align="center" prop="count3"/>
          <el-table-column label="已发放金额" width="120" align="center" prop="money3"/>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    import {deleteAction, getAction} from '@/api/manage'

    export default {
        name: "StatisticsForBxjf",
        title: "开发经费报销",
        components: {},
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 统计数据表格数据
                dataList: [],
                dataListW: [],
                dataListM: [],
                dataListS: [],
                dataListY: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 200,
                    deptId: null,
                    deptName: null,
                    userId: null,
                    userName: null,
                    category: "gcbxtj",
                    kind: null,
                    type: null,
                    insertTime: null,
                    orderByColumn: "sort",
                    isAsc: "asc"
                },
                url: {
                    list: '/goodsStatistics/goodsStatistics/list',
                },
                tableMaxHeight: window.innerHeight - 320,
            };
        },
        created() {
            this.getList();
            window.addEventListener('resize', this.getTableHeight);
        },
        destroyed() {
            window.removeEventListener('resize', this.getTableHeight)
        },
        methods: {
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 查询统计数据列表 */
            getList() {
                let that = this;
                that.loading = true;
                getAction(that.url.list, that.queryParams).then(response => {
                    /*that.dataList = response.rows;
                    that.loading = false;*/
                    let dataList = response.rows;
                    let listW = [];
                    let listM = [];
                    let listS = [];
                    let listY = [];
                    for (let i = 0; i < dataList.length; i++) {
                        if (dataList[i].kind == "week") {
                            listW.push(dataList[i]);
                        } else if (dataList[i].kind == "month") {
                            listM.push(dataList[i]);
                        } else if (dataList[i].kind == "season") {
                            listS.push(dataList[i]);
                        } else if (dataList[i].kind == "year") {
                            listY.push(dataList[i]);
                        }
                    }
                    that.dataListW = listW;
                    that.dataListM = listM;
                    that.dataListS = listS;
                    that.dataListY = listY;
                    that.loading = false;
                });
            },
            getTableHeight() {
                this.tableHeight = window.innerHeight - 320
            },
        }
    };
</script>
<style scoped>
  h2 {
    text-align: center;

  }
</style>
